<template>
	<view class="order-info-container">
		<!-- 订单信息模块 -->
		<view class="info-module card">
			<text class="module-title">订单信息</text>
			<view v-for="(item, index) in orderInfo" :key="index" class="info-item">
				<text class="item-label">{{ item.label }}</text>
				<text class="item-value" v-if="item.date">{{ formatDate(orderDetail.checkIn,'YYYY-MM-DD')}}至
					{{formatDate(orderDetail.checkOut,'YYYY-MM-DD')}}</text>
				<text class="item-value" v-else>{{ orderDetail[item.value] }}</text>
			</view>
		</view>

		<!-- 支付金额模块 -->
		<view class="info-module card">
			<text class="module-title">支付金额</text>
			<view v-for="(item, index) in paymentInfo" :key="index" class="info-item">
				<text class="item-label">{{ item.label }}
					{{item.key?orderDetail[item.key]+'晚':''}}</text>
				<text class="item-value" v-if="item.key">{{orderDetail.currency}}{{ orderDetail[item.value]/orderDetail[item.key] }}</text>
				<text class="item-value" v-else>{{orderDetail.currency}}{{ orderDetail[item.value] }}</text>
			</view>
			<view class="info-item">
				<text class="item-label">入住人</text>
				<text class="item-value" >{{orderDetail.bookedRooms.map(item=>item.guests.filter(val=>val.isPrimary)[0].fullName).join('') }}</text>
			</view>
			<view class="total-item">
				<text class="total-label">总额</text>
				<text class="total-value">{{orderDetail.currency}}{{ orderDetail.totalAmount }}</text>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { formatDate } from '../../../utils';
	import type { book } from '@/types'
	import { ref } from 'vue';
	defineProps<{
		orderDetail ?: book
	}>()
	// 订单信息数据
	const orderInfo = ref([
		{ label: '订单号', value: 'orderNo' },
		{ label: '酒店名称', value: 'hotelName' },
		{ label: '房型', value: 'roomTypeName' },
		{ label: '入住日期', value: '2024-07-01 至 2024-07-03', date: true },
		// { label: '入住人', value: 'fullName' },
	]);

	// 支付金额数据
	const paymentInfo = ref([
		{ label: '房费 ', key: 'nights', value: 'totalPrice' },
		{ label: '税费和服务费', value: 'taxServiceFee' },
		// { label: '税费', value: 'taxFee' },
	]);

	// 总额
	const totalValue = ref('¥ 1,400.37');
</script>

<style scoped>
	.order-info-container {
		/* padding: 20rpx; */
		/* background-color: #fff; */
	}

	.info-module {
		/* margin-bottom: 20rpx;
  padding: 20rpx;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); */
	}

	.module-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		display: block;
	}

	.info-item {
		display: flex;
		justify-content: space-between;
		padding: 15rpx 0;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.info-item:last-child {
		border-bottom: none;
	}

	.item-label {
		font-size: 28rpx;
		color: #666;
	}

	.item-value {
		font-size: 28rpx;
		color: #333;
	}

	.total-item {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0 10rpx;
		margin-top: 10rpx;
		/* border-top: 1rpx solid #f5f5f5; */
	}

	.total-label {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
	}

	.total-value {
		font-size: 30rpx;
		font-weight: bold;
		color: #ff6600;
	}
</style>